<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./jquery.js"></script>
  <title>01_左进左出</title>
  <link rel="stylesheet" href="./01_zjzc.css" />
</head>

<!-- JQuery 动画样式 -->
<script type="text/javascript">

  //加载函数
  $(function () {

    //所有子菜单的隐藏
    $(".nav-menu").each(function () {
      $(this).children(".nav-content").hide()
    })

    //给所有的主标题表的绑定事件
    $(".nav-title").each(function () {
      $(this).click(function () {
        var conEle = $(this).parents(".nav-menu").children(".nav-content")

        if (conEle.css("display") != "none") {
          //关闭
          conEle.hide(500)
        } else {
          //展开 关闭其他子标题
          var navLLL = conEle.parents(".nav-menu")
          //找到出来自己的所有节点
          var menuEle = navLLL.siblings()
          menuEle.each(function () {
            $(this).children(".nav-content").hide(500)
          })

          conEle.show(500)
        }
      })
    })
  })

</script>

<body>
  <div class="content">

    <div class="content-left">
      <div class="left-title">
        <a href="#">在线投票管理系统</a>
      </div>
      <!-- 分割线 -->
      <div class="seg"></div>
      <!-- 菜单栏 整个div包裹起来 -->
      <div class="nav">
        <!-- 每一个菜单栏导航 -->

        <div class="nav-menu">
          <!-- 主标题 -->
          <div class="nav-title">商品管理</div>
          <!-- 子标题 有多个 总的也用一个div包裹-->
          <div class="nav-content">
            <a href="#">商品列表</a>
            <a href="#">添加商品</a>
          </div>
        </div>

        <div class="nav-menu">
          <!-- 主标题 -->
          <div class="nav-title">订单管理</div>
          <!-- 子标题 有多个 总的也用一个div包裹-->
          <div class="nav-content">
            <a href="#">订单列表</a>
            <a href="#">订单商品</a>
          </div>
        </div>

        <div class="nav-menu">
          <!-- 主标题 -->
          <div class="nav-title">类目管理</div>
          <!-- 子标题 有多个 总的也用一个div包裹-->
          <div class="nav-content">
            <a href="#">类目列表</a>
            <a href="#">类目商品</a>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="seg"></div>
    </div>
  </div>

  <div class="content-rigth">

    <h1>内容区</h1>
  </div>


  </div>
</body>

</html>